<template>
	<view class="content">
		<view class="box" >
			
			<view class="count">
				<view class="out">
					<view class="name">支出</view>
					<view class="less">{{outAmount}}</view>
				</view>
				<view class="in">
					<view class="name">收入</view>
					<view class="push">{{inAmount}}</view>
				</view>
			</view>
			<view class="search">
				
				<picker class="picker-item" mode="selector" :range="users" range-key="remark" @change="userChange"  @cancel="userCancel">
					{{target_text}} <text class="iconfont icon-triangle-copy-copy-copy"></text>
				</picker>
				<picker class="picker-item date" mode="date" @change="dateChange" @cancel="dateCancel"><text class="iconfont icon-rili"></text> {{date_text}}</picker>

				
				<picker class="picker-item" mode="selector" :range="operateList" range-key="name" @change="operateChange">
					{{type_text}} <text class="iconfont icon-triangle-copy-copy-copy"></text>
				</picker>
				<picker class="picker-item" mode="selector" :range="accountList" range-key="name" @change="accountChange"  @cancel="accountCancel">
					{{account_text}} <text class="iconfont icon-triangle-copy-copy-copy"></text>
				</picker>
			</view>
			
			
			<view class="list"  v-if="fundsList.length > 0">
				<view class="uni-list">
					<view class="uni-list-cell" @click="toDetail(item.id)" v-for="(item,index) in fundsList" :key="index">
						<view class="uni-media-list">
							<image class="uni-media-list-logo" :src="item.icon_image"></image>
							<view class="uni-media-list-body">
								<view class="info">
									<view class="type-name">{{item.user_remark?'【'+item.user_remark+'】':''}}  {{item.type_name}}</view>
									<view class="account_name">{{item.account_name}} {{item.remark?'【'+item.remark+'】':''}}</view>
									<view class="time">{{item.create_time}}</view>
								</view>
								<view class="amount" :class="item.operation_type == 2?'push': 'less'">{{item.operation_type == 2 ? '+' : '-'}} {{item.amount}}</view>
							</view>
						</view>
					</view>
				</view>
				
				
			</view>
			<view class="no-data" v-else>您还没有记帐记录</view>
		</view>
		
		
		<!-- 记一笔 -->
		<navigator url="../funds/add" class="add"><text class="iconfont icon-jilu"></text></navigator>
	</view>
</template>

<script>
	import base from '../../common/base.js';
	
	export default {
		data() {
			return {
				fundsList: [],
				page: 1,
				nextPage: true,
				target_text: '成员',
				date_text: '日期',
				type_text: '类型',
				type_id: '',
				account_text: '全部帐户',
				account_id: '',
				accountList: [],
				users: [],
				userId: '',
				date: '',
				operateList: [
					{
						value: '',
						name: '全部'
					},
					{
						value: '1',
						name: '支出'
					},
					{
						value: '2',
						name: '收入'
					}
				],
				inAmount:0,
				outAmount: 0,
			};
		},
		onLoad() {
			this.getAccountList();
			this.getusers();
			this.getList((res) => {
				
			})
		},
		onShow(){
			// this.resetData();
			
		},
		onPullDownRefresh() {
			this.resetData();
		},
		onReachBottom() {
			this.getList((res) => {
				uni.stopPullDownRefresh();
			})
		},
		onShareAppMessage() {
			return {
				title: '我的记帐本',
				path: '/pages/index/index',
				imageUrl: '/static/code.jpg'
			}
		},
		methods: {
			resetData: function(){
				this.fundsList = [];
				this.page = 1;
				this.nextPage = true;
				this.target_text = '成员';
				this.date_text = '日期';
				this.type_text = '类型';
				this.type_id = '',
				this.account_text = '全部帐户';
				this.account_id = '';
				this.userId = '';
				this.date = '';
				this.getList((res) => {
					uni.stopPullDownRefresh();
				});
				
			},
			
			//流水列表 
			getList: function(callback) {
				var that = this;
				var data = {
					page: that.page,
					date: that.date,
					user_id: that.userId,
					account_id: that.account_id,
					operation_type: that.type_id
				}
				
				base.base.request({
					data: data,
					url: 'funds/index',
					sCallback: function(res) {
						if(res.code == 200) {
							that.fundsList = that.fundsList.concat(res.data.list);
							that.inAmount = res.data.inAmount;
							that.outAmount = res.data.outAmount;
							that.page ++;
						}
						callback && callback(res);
					}
				});
				
			},
			
			//帐户列表
			getAccountList: function(callback){
				var that = this;
				base.base.request({
					data: {'target_user_id':that.userId},
					url: 'account/index',
					sCallback: function(res){
						var accountList = res.data.account_list;
						if(accountList.length > 0) {
							accountList.forEach(function(item){
								var name = '';
								if(item.remark){
									name = '【'+item.remark+'】';
								}
								item.name = name+item.name;
							})
						}
						that.accountList = accountList;
						that.amount = res.data.amount;
						callback && callback(res);
					}
				})
			},
			
			//绑定成员 
			getusers: function(){
				var that = this;
				base.base.request({
					data: {},
					url: 'binduser/users',
					sCallback: function(res){
						that.users = that.users.concat(res.data);
					}
				})
			},
			initData: function(){
				this.page = 1;
				this.fundsList = [];
				this.getList();
			},
			
			//选择时间
			dateChange(evt) {
				this.date = evt.detail.value;
				this.date_text = this.date.substr(5, this.date.length);
				this.initData();
			},
			
			//取消时间
			dateCancel(){
				this.date = '',
				this.date_text = '日期',
				this.initData();
			},
			//选择成员
			userChange(evt) {
				
				var index = evt.detail.value;
				this.target_text = this.users[index]['remark'];
				this.userId = this.users[index]['target_user_id'];
				this.initData();
				this.getAccountList();
			},
			//取消成员
			userCancel(evt) {
				
				this.target_text = '成员';
				this.userId = '';
				this.initData();
				this.getAccountList();
			},
			//选择类型
			operateChange(evt) {
				var index = evt.detail.value;
				var data = this.operateList[index];
				this.type_text = data.name;
				this.type_id = data.value;
				this.initData();
			},
			//选择帐号
			accountChange(evt) {
				var index = evt.detail.value;
				var data = this.accountList[index];
				this.account_text = data.name;
				this.account_id = data.id;
				this.initData();
			},
			//取消帐号
			accountCancel(evt) {
			
				this.account_text = '全部帐户';
				this.account_id = '';
				this.initData();
				
			},
			//去详情
			toDetail: function(id){
				uni.navigateTo({
					url: '/pages/funds/detail?id='+id,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>

<style>
	
	
	.content {
		flex: 1;
		justify-content: center;
		align-items: center;

	}
	
	.box{
		flex-direction: column;
		width: 100%;
		padding-top: 190upx;
	}
	
	.count{
		height: 100upx;
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		background: #081F3F;
		color: B2B3B4;
		border-bottom: 1upx solid #1F4B83;
		font-size: 20upx;
		line-height: 50upx;
	}
	
	.count>view{
		justify-content: center;
		flex-direction: column;
		flex: 1;
	}
	
	.count .out{
		/* border-right: 1upx solid #1F4B83; */
	}
	
	.count .name{
		color: #73767C;
	}
	.count view{
		justify-content: center;
	}
	
	.count .push, .count .less{
		font-size: 40upx;
	}
	
	/* 搜索框开始 */
	.search{
		height: 90upx;
		width: 100%;
		position: fixed;
		top: 101upx;
		left: 0;
		z-index: 999;
		background: #081F3F;
		color: B2B3B4;
		padding: 15upx 0;
		font-size: 22upx;
		justify-content: center;
		box-sizing: border-box;
		line-height: 60upx;
	}
	
	.search picker{
		display: flex;
		flex: 1;
		justify-content: center;
		border-right: 1upx solid #1F4B83;
		overflow: hidden;
		
	}
	
	.search .iconfont{
		padding: 0 8upx;
	}

	.list{
		flex: 1;
	}
	.title {
		font-size: 36upx;
		color: #8f8f94;
	}
	
	.add{
		text-align: center;
		width: 120upx;
		height: 120upx;
		position: fixed;
		bottom: 45upx;
		right: 120upx;
		border-radius: 50%;
		font-size:28upx;
		font-weight:400;
		color:rgba(255,255,255,1);
		line-height:120upx;
		background:linear-gradient(143deg,rgba(129,95,250,1) 0%,rgba(78,106,240,1) 100%);
		z-index: 999;
		display: block;
	}
	
	.add .iconfont{
		font-size: 80upx;
	}
	
	.info{
		flex-direction: column;
		flex: 1;
		line-height: 40upx;
	}
	
	.uni-media-list-body{
		height: auto;
		font-size: 24upx;
		flex-direction: row;
	}
	
	.amount{
		width: 160upx;
		font-size: 30upx;
		text-align: right;
		display: block;
	}
	
	.push{
		color:#4CD964;
	}
	
	.less{
		
		color: #e60012;
	}
	
	.uni-media-list{
		padding: 20upx;
	}
	
	.uni-list-cell:after{
		left: 0;
	}
</style>
